<template>
  <view class="uni-data-pickerview">
    <view class="selected-area">
      <uv-search
        placeholder="请输入搜索内容"
        v-model="keyword"
        @search="search"
        @clickIcon="search"
        @custom="search"
        :showAction="false"
      ></uv-search>
    </view>
    <view class="selected-area">
      <view class="selected-list-header">
        <view
          class="selected-item-header"
          v-for="(item, index) in defList"
          :key="index"
          :class="{
            'selected-item-active': item.id == selecteddef,
          }"
          @click="defNodeClick(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="tab-c">
      <scroll-view class="tab-c-item" :scroll-y="true">
        <view class="list" v-for="(list, j) in dataList" :key="j">
          <identifylabelitem
            :data="list"
            @handle-node-click="handleNodeClick"
            :_selected="_selected"
          >
          </identifylabelitem>
        </view>
      </scroll-view>
    </view>
    <view class="select-item">
      <view class="select-item-view">
        <view @click="popup.open"> 已选择：{{ _selected.length }} </view>
        <view>
          <uv-icon name="arrow-up" size="14"></uv-icon>
        </view>
      </view>
      <view :style="{ display: 'flex', gap: '12px' }">
        <uv-button
          v-if="_selected.length"
          :custom-style="defaultButton"
          @click="_selected = []"
          >{{ $t("清空") }}</uv-button
        >
        <uv-button :custom-style="submitButton" @click="submit">{{
          $t("确定")
        }}</uv-button>
      </view>
    </view>
  </view>
  <uv-popup ref="popup" mode="bottom" @change="(e: any) => pageshow = e.show">
    <view class="popup-context">
      <view class="popup-context-header">
        <view class="select-item">
          <view class="select-item-view">
            <view> 已选择：{{ _selected.length }} </view>
          </view>
          <view>
            <uv-button :custom-style="submitButton" @click="popup?.close">{{
              $t("确定")
            }}</uv-button>
          </view>
        </view>
      </view>
      <scroll-view class="list" :style="{ height: '1px' }" :scroll-y="true">
        <view
          class="popup-context-view"
          v-for="(v, i) in _selected"
          :key="v.id"
        >
          <uv-tags
            bgColor="#748ee2"
            borderColor="#748ee2"
            color="#ffffff"
            closable
            :text="v.name"
            @close="_selected.splice(i, 1)"
          >
          </uv-tags>
        </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import api from "../../api/index";
import { deepTree, searchTree } from "../../util/index";
import { submitButton, defaultButton } from "@/util/style";
import { watch, computed } from "vue";
import identifylabelitem from "./aiidentifylabelitem.vue";
const p = withDefaults(
  defineProps<{ modelValue: string[]; multiple?: boolean }>(),
  {
    modelValue: () => [],
  }
);
import { useI18n } from "vue-i18n";
const pageshow = ref(false);
const popup = ref();

onMounted(() => {
  start();
});
const $t = useI18n().t;
const keyword = ref();

const emit = defineEmits([
  "update:modelValue",
  "change",
  "nodeclick",
  "submit",
]);

const _selected = ref<Eps.identifylabelEntity[]>([]);

const selecteddef = ref("-1");

function submit() {
  emit(
    "update:modelValue",
    _selected.value.map((e) => e.id)
  );
  emit(
    "submit",
    _selected.value.map((e) => e.id)
  );
}

function search() {
  if (keyword.value) {
    selecteddef.value = "";
    dataList.value = searchTree(columns.value, keyword.value);
  } else {
    dataList.value = [];
  }
}

const data = ref<Eps.identifylabelEntity[]>([]);
const columns = ref<Eps.identifylabelEntity[]>([]);
async function start() {
  api<Eps.identifylabelEntity[]>("/wechat/aiidentifylabel/list")
    .then((e) => {
      data.value = e;
      columns.value = deepTree(e).filter((e) => e.name !== "产品");
      defList.value = columns.value;
      _selected.value = data.value.filter((e) => {
        return p.modelValue?.includes(String(e.id));
      });
    })
    .catch((f) => {
      uni.showToast({
        icon: "error",
        title: f,
        duration: 2000,
      });
    });
}

const dataList = ref<Eps.identifylabelEntity[][]>([]);
const defList = ref<Eps.identifylabelEntity[]>([]);

watch(
  () => p.modelValue,
  (e) => {
    _selected.value = data.value.filter((e) => {
      return p.modelValue?.includes(String(e.id));
    });
  }
);

function handleNodeClick(item: Eps.identifylabelEntity) {
  if (!item.children?.length) {
    _dispatchEvent(item);
    const index = _selected.value.findIndex((c) => c.id === item.id);
    if (index > -1) {
      _selected.value.splice(index, 1);
    } else {
      _selected.value.push(item);
    }
  } else {
    onSelectedChange(item);
  }
  // 本地数据
}

function defNodeClick(item: Eps.identifylabelEntity) {
  const node = item;
  if (!item.children?.length) {
    _dispatchEvent(node);
    const index = _selected.value.findIndex((c) => c.id === item.id);
    if (index > -1) {
      _selected.value.splice(index, 1);
    } else {
      _selected.value.push(item);
    }
  }
  selecteddef.value = String(node.id);
  dataList.value = item.children;
  // 本地数据
}
function onSelectedChange(node: Eps.identifylabelEntity) {
  if (node) {
    emit("nodeclick", node);
  }
}

function _dispatchEvent(item: Eps.identifylabelEntity) {
  if (p.multiple) {
    emit(
      "change",
      _selected.value.map((e) => e.id)
    );
  } else {
    emit("change", item.id);
  }
}
</script>

<style scoped lang="scss">
.uni-data-pickerview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.select-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1rpx solid #ff746f;

  .select-item-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    gap: 12rpx;
  }
}

.selected-area {
  height: 120rpx;
  display: flex;
  padding-left: 24rpx;
  padding-right: 24rpx;
  align-items: center;
}

.selected-list-header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 0 5px;
  align-items: center;
  height: 80rpx;
  gap: 20rpx;
  justify-content: center;
  width: 100%;

  .selected-item-header {
    white-space: nowrap;
    color: #748ee2;
    border: 1rpx solid #748ee2;
    padding: 10rpx 12rpx;
    transition: all 0.3s;
    font-size: 36rpx;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
    text-align: justify;
    text-align-last: justify;
  }

  .selected-item-active {
    background-color: #748ee2 !important;
    color: #fff !important;
  }
}

.selected-list {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 0 5px;
  align-items: center;
  padding-left: 45rpx;
  height: 80rpx;
}

.selected-item {
  margin-right: 10px;
  white-space: nowrap;
  color: #748ee2;
  border: 1rpx solid #748ee2;
  padding: 10rpx 12rpx;
  transition: all 0.3s;
  font-size: 36rpx;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
  text-align: justify;
  text-align-last: justify;
  min-width: 88rpx;
}

.selected-item-text-overflow {
  width: 168px;
  /* fix nvue */
  overflow: hidden;
  /* #ifndef APP-NVUE */
  width: 6em;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  /* #endif */
}

.selected-item-active {
  background-color: #748ee2;
  color: #fff;
}

.selected-item-text {
  color: #ff746f;
}

.tab-c {
  position: relative;
  flex: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding-left: 12rpx;
  padding-right: 12rpx;

  .tab-c-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    height: 100%;
  }
}

.list {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #eee;
  padding-top: 12rpx;
  flex-direction: column;
}

.is-disabled {
  opacity: 0.5;
}

.item-text {
  /* flex: 1; */
  color: #333333;
}

.item-text-overflow {
  width: 280px;
  /* fix nvue */
  overflow: hidden;
  /* #ifndef APP-NVUE */
  width: 20em;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  /* #endif */
}

.check {
  margin-right: 5px;
  border: 2px solid #ff746f;
  border-left: 0;
  border-top: 0;
  height: 12px;
  width: 6px;
  transform-origin: center;
  /* #ifndef APP-NVUE */
  transition: all 0.3s;
  /* #endif */
  transform: rotate(45deg);
}

.popup-context {
  width: 100vw;
  display: flex;
  gap: 12rpx;
  flex-direction: column;
  height: 50vh;

  .popup-context-header {
    height: 130rpx;
  }

  .popup-context-view {
    height: 84rpx;
    padding: 12rpx;
    display: inline-flex;
  }
}
</style>
